<template>
  <el-form
    v-show="getShow"
    ref="formRegist"
    :model="loginData.loginForm"
    :rules="LoginRules"
    class="login-form"
    label-position="top"
    label-width="120px"
    size="large"
  >
    <el-row style="margin-right: -10px; margin-left: -10px">
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <LoginFormTitle style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
          <el-input
            v-model="loginData.loginForm.tenantName"
            :placeholder="t('login.tenantNamePlaceholder')"
            :prefix-icon="iconHouse"
            link
            type="primary"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="username">
          <el-input
            v-model="loginData.loginForm.username"
            :placeholder="t('login.usernamePlaceholder')"
            :prefix-icon="iconAvatar"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="password">
          <el-input
            v-model="loginData.loginForm.password"
            :placeholder="t('login.passwordPlaceholder')"
            :prefix-icon="iconLock"
            show-password
            type="password"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="checkPassword">
          <el-input
            v-model="loginData.loginForm.checkPassword"
            :placeholder="'请再次输入密码'"
            :prefix-icon="iconLock"
            show-password
            type="password"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="type">
          <span style="padding-right: 10px">类型</span>
          <el-radio-group v-model="loginData.loginForm.type">
            <el-radio value="1">企业</el-radio>
            <el-radio value="2">个人</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <XButton
            :loading="loginLoading"
            :title="t('login.register')"
            class="w-[100%]"
            type="primary"
            @click="handleLogin"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { ElLoading, ElMessage } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue'

import { useIcon } from '@/hooks/web/useIcon'

import * as authUtil from '@/utils/auth'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { useRegisterStores } from '@/store/modules/register'

defineOptions({ name: 'LoginForm' })

const { t } = useI18n()
// const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const formRegist = ref()
const { push } = useRouter()
const { validForm } = useFormValid(formRegist)
const { handleBackLogin, getLoginState } = useLoginState()
const redirect = ref<string>('')
const loginLoading = ref(false)

const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)

const LoginRules = {
  username: [required],
  password: [required],
  checkPassword: [required],
  type: [required]
}
const loginData = reactive({
  isShowPassword: false,
  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
  loginForm: {
    tenantName: '芋道源码',
    username: '',
    password: '',
    checkPassword: '',
    type: ''
  }
})
const loading = ref() // ElLoading.service 返回的实例
// 提交注册
const handleLogin = async () => {
  loginLoading.value = true
  const data = await validForm()
  console.log(loginData.loginForm)
  // 修改状态管理 注册类型
  const registerStore = useRegisterStores()
  registerStore.setRegisterType(loginData.loginForm.type)
  if (!data) {
    return
  }
  // 假数据定向道资料完善页面
    push({ path: '/perfect' })
    return
  if (loginData.loginForm.password !== loginData.loginForm.checkPassword) {
    ElMessage.warning('输入密码不一致')
    return
  }
  const res = await LoginApi.regist(loginData.loginForm)
  if (!res) {
    return
  }
  loading.value = ElLoading.service({
    lock: true,
    text: '正在加载系统中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  authUtil.setToken(res)
  if (!redirect.value) {
    redirect.value = '/'
  }
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}

.login-code {
  float: right;
  width: 33%;
  height: 38px;

  img {
    width: 100%;
    height: auto;
    max-width: 100px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
